var update = function() {

    // update
    updateEntities();

    // rendering
    var canvas = document.getElementById("battlefieldCanvas");
    if (canvas.getContext) {
        var context = canvas.getContext("2d");
        context.setTransform(1, 0, 0, 1, 0, 0);

        context.clearRect(0, 0, canvas.width, canvas.height);

        var player = findEntity(playerId.value);

        context.scale(1.0, 1.0);

        context.save();

        if (player !== null) {
            context.translate(-player.lerpPos.x + 512, -player.lerpPos.y + 384);
        }

        drawMap(context, mapData);

        drawFov(context, mapData, player);

        context.restore();

        // ui
        if (player !== null) {
            drawText(player.hitpoints, 20, 748);
        }
    }
};

setInterval(update, 10);

window.addEventListener("load", initWebsocket, false);

window.addEventListener('keydown', handleKeydownEvent, false);
window.addEventListener('keyup', handleKeyupEvent, false);

window.addEventListener("load", initMouse, false);
